/* ==========================================================================
   Inputs

   The form-control class style all inputs
========================================================================== */

.form-control {
    display: block;
    width: 100%;
    height: $form-input-height;
    padding: $form-input-padding-y $form-input-padding-x;
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    -moz-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    color: $form-input-color;
    border: 1px solid $form-input-border-color;
    border-radius: $form-input-border-radius;
    background-color: $form-input-bg;
    background-image: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-size: $form-input-font-size;
    line-height: $form-input-line-height;
    -moz-appearance: none;
    -webkit-appearance: none;
    @if $form-input-style==lined {
        @extend .form-control-lined;
    }
}

.form-control:focus {
    border-color: $form-input-border-focus-color;
    outline: 0;
    background-color: $form-input-bg-focus;
    -webkit-box-shadow: none;
    box-shadow: none;
}

textarea.form-control {
    height: auto;
}


select.form-control {
    $arrow: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15px' height='8px'><polyline id='Line' fill='none' stroke='%23555555' points='0.5 0.5 6 6 11.545361 0.5'></polyline></svg>";
    padding-right: 30px;
    background-image: url($arrow);
    background-repeat: no-repeat;
    background-position: calc(100% - #{$form-input-padding-x}) center;
    -moz-appearance: none;
    -webkit-appearance: none;
}

// Lined
.form-control-lined {
    border: 0;
    border-bottom: 1px solid $form-input-border-color;
    border-radius: 0;
    background-color: transparent;
    &:focus {
        background-color: transparent;
    }
}

// Read only fom control class
.form-control-static {
    overflow: hidden;
    min-height: auto;
    padding-top: $form-input-padding-y;
    padding-bottom: $form-input-padding-y;
    padding-left: $form-input-padding-x;
    border-bottom: 1px solid $form-input-static-border-color;
    font-size: $form-input-font-size;
    line-height: $form-input-line-height;
}

// Not editable textarea, textarea will be rendered as a label
.mx-textarea label {
    height: auto;
}

// File input widget
.mx-fileinput {
    .mx-wrapped-label {
        display: inline-block;
        width: 200px;
    }
    /* File input widget hover fix */
    .mx-wrapped-form {
        .mx-wrapped-input {
            cursor: pointer;
        }
        .mx-fileinput-upload-button:hover {
            background-color: $btn-default-bg;
        }
    }
}

// Form Group
.form-group {
    margin-bottom: $form-group-margin-bottom;
    & > [class*="col-"] {
        padding-right: $form-group-gutter;
        padding-left: $form-group-gutter;
    }
    // Alignment content
    div[class*="textBox"] > label,
    div[class*="textArea"] > label,
    div[class*="datePicker"] > label {
        @extend .form-control-static;
    }
    // Label
    .control-label {
        color: $form-label-color;
        font-size: $form-label-size;
        font-weight: $form-label-weight;
    }
}

// Orientation
.form-horizontal {
    @media (min-width: $screen-sm) {
        .control-label {
            padding-top: $form-input-padding-y;
            padding-bottom: $form-input-padding-y;
            line-height: $form-input-line-height;
        }
    }
}
